<template>
	<view class="page-doubleDan">
		<view class="dd-desc">
			<image class="desc-img" src="../../static/doubleDan/bg.png" mode="widthFix"></image>
			<view class="desc-user">
				您好，尊敬的{{ userPhone }}
			</view>
			<view class="desc-myPrize" @click="onClickMyPrize">
				我的奖品
			</view>
			<view class="desc-joinList" v-if="swiperList && swiperList.length !== 0">
				<swiper 
					class="joinList-swiper"
					:indicator-dots="false" 
					:vertical="true" 
					:autoplay="true" 
					:circular="true"
					:interval="2500" 
					:duration="500"
					:disable-touch="true"
				>
					
					<swiper-item 
						class="joinList-swiper-item" 
						catchtouchmove="onSwiperTouchMove"
						v-for="(item, index) in swiperList"
						:key="index"
					>
						<view class="swiper-item-content">恭喜用户【{{ item.phone }}】抽到{{ item.prizeName }}！</view>
					</swiper-item>
					<!-- <swiper-item class="joinList-swiper-item" catchtouchmove="onSwiperTouchMove">
						<view class="swiper-item-content">恭喜用户【135****7741】抽到爱奇艺VIP月卡！</view>
					</swiper-item> -->
				</swiper>
			</view>
		</view>
		
		<!-- 宝箱进度条 -->
		<view class="dd-box">
			<view class="box-progress">
				<!-- 进度条 -->
				<view class="box-progress-line">
					<!-- 第一个宝箱进度 2000 -->
					<view class="box-progress-line-active" :class="{full: people >= 2000}">
						<view class="active-in" :style="{width: `${(people/2000)*100}%`}"></view>
					</view>
					<!-- 第二个宝箱进度 5000-2000=3000 -->
					<view class="box-progress-line-active" :class="{full: people >= 5000}">
						<view class="active-in" :style="{width: people > 2000 && `${((people - 2000)/3000)*100}%`}"></view>
					</view>
					<!-- 第三个宝箱进度 10000-5000=5000 -->
					<view class="box-progress-line-active" :class="{full: people >= 10000}">
						<view class="active-in" :style="{width: people > 5000 && `${((people - 5000)/5000)*100}%`}"></view>
					</view>
					<!-- 第四个宝箱进度 20000-10000=10000 -->
					<view class="box-progress-line-active" :class="{full: people >= 20000}">
						<view class="active-in" :style="{width: people > 10000 && `${((people - 10000)/10000)*100}%`}"></view>
					</view>
					<!-- 第五个宝箱进度 30000-20000=10000 -->
					<view class="box-progress-line-active" :class="{full: people >= 30000}">
						<view class="active-in" :style="{width: people >= 20000 && `${((people - 20000)/10000)*100}%`}"></view>
					</view>
				</view>
				
				<view class="box-item item-1">
					<block v-if="boxList[2000] === 3">
						<image src="../../static/doubleDan/box.png" mode="widthFix" @click="onOpenBox"></image>
					</block>
					<block v-else-if="boxList[2000] === 2 || boxList[2000] === 4">
						<image src="../../static/doubleDan/box-opened.png" mode="widthFix"></image>
					</block>
					<block v-else>
						<image src="../../static/doubleDan/box-disabled.png" mode="widthFix"></image>
					</block>
					<view class="box-number">2000人</view>
				</view>
				<view class="box-item item-2">
					<block v-if="boxList[5000] === 3">
						<image src="../../static/doubleDan/box.png" mode="widthFix" @click="onOpenBox"></image>
					</block>
					<block v-else-if="boxList[5000] === 2 || boxList[5000] === 4">
						<image src="../../static/doubleDan/box-opened.png" mode="widthFix"></image>
					</block>
					<block v-else>
						<image src="../../static/doubleDan/box-disabled.png" mode="widthFix"></image>
					</block>
					<view class="box-number">5000人</view>
				</view>
				<view class="box-item item-3">
					<block v-if="boxList[10000] === 3">
						<image src="../../static/doubleDan/box.png" mode="widthFix" @click="onOpenBox"></image>
					</block>
					<block v-else-if="boxList[10000] === 2 || boxList[10000] === 4">
						<image src="../../static/doubleDan/box-opened.png" mode="widthFix"></image>
					</block>
					<block v-else>
						<image src="../../static/doubleDan/box-disabled.png" mode="widthFix"></image>
					</block>
					<view class="box-number">10000人</view>
				</view>
				<view class="box-item item-4">
					<block v-if="boxList[20000] === 3">
						<image src="../../static/doubleDan/box.png" mode="widthFix" @click="onOpenBox"></image>
					</block>
					<block v-else-if="boxList[20000] === 2 || boxList[20000] === 4">
						<image src="../../static/doubleDan/box-opened.png" mode="widthFix"></image>
					</block>
					<block v-else>
						<image src="../../static/doubleDan/box-disabled.png" mode="widthFix"></image>
					</block>
					<view class="box-number">20000人</view>
				</view>
				<view class="box-item item-5">
					<block v-if="boxList[30000] === 3">
						<image src="../../static/doubleDan/box.png" mode="widthFix" @click="onOpenBox"></image>
					</block>
					<block v-else-if="boxList[30000] === 2 || boxList[30000] === 4">
						<image src="../../static/doubleDan/box-opened.png" mode="widthFix"></image>
					</block>
					<block v-else>
						<image src="../../static/doubleDan/box-disabled.png" mode="widthFix"></image>
					</block>
					<view class="box-number">30000人</view>
				</view>
			</view>
			<view class="box-currentPerson box-number">
				{{ people }}
			</view>
		</view>
		
		<!-- 夺宝抽奖 -->
		<view class="dd-prize" v-if="prizeList && prizeList.length !== 0">
			<view class="prize-wrap">
				<view class="prize-wrap-in">
					
					<view class="prize-btn" :class="{disabled: lotteryCount === 0}" @click="onBeginLottery">
						<view class="prize-btn-text">开始夺宝</view>
						<view class="prize-btn-count">剩余{{ lotteryCount }}次</view>
					</view>
					
					<view class="prize-row">
						<!-- 第1个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 0}"></view>
							<image class="item-image" :src="prizeList[0]['prizeImageUrl']" mode="widthFix"></image>
						</view>
						<!-- 第2个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 1}"></view>
							<image class="item-image" :src="prizeList[1]['prizeImageUrl']" mode="widthFix"></image>
						</view>
						<!-- 第3个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 2}"></view>
							<image class="item-image" :src="prizeList[2]['prizeImageUrl']" mode="widthFix"></image>
						</view>
						<!-- 第4个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 3}"></view>
							<image class="item-image" :src="prizeList[3]['prizeImageUrl']" mode="widthFix"></image>
						</view>
					</view>
					
					<view class="prize-row">
						<!-- 第12个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 11}"></view>
							<image class="item-image" v-if="prizeList[11]['prizeImageUrl']" :src="prizeList[11]['prizeImageUrl']" mode="widthFix"></image>
						</view>
						<!-- 第5个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 4}"></view>
							<image class="item-image" v-if="prizeList[4]['prizeImageUrl']" :src="prizeList[4]['prizeImageUrl']" mode="widthFix"></image>
						</view>
					</view>
					
					<view class="prize-row">
						<!-- 第11个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 10}"></view>
							<image class="item-image" v-if="prizeList[10]['prizeImageUrl']" :src="prizeList[10]['prizeImageUrl']" mode="widthFix"></image>
						</view>
						<!-- 第6个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 5}"></view>
							<image class="item-image" v-if="prizeList[5]['prizeImageUrl']" :src="prizeList[5]['prizeImageUrl']" mode="widthFix"></image>
						</view>
					</view>
					
					<view class="prize-row">
						<!-- 第10个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 9}"></view>
							<image class="item-image" v-if="prizeList[9]['prizeImageUrl']" :src="prizeList[9]['prizeImageUrl']" mode="widthFix"></image>
						</view>
						<!-- 第9个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 8}"></view>
							<image class="item-image" v-if="prizeList[8]['prizeImageUrl']" :src="prizeList[8]['prizeImageUrl']" mode="widthFix"></image>
						</view>
						<!-- 第8个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 7}"></view>
							<image class="item-image" v-if="prizeList[7]['prizeImageUrl']" :src="prizeList[7]['prizeImageUrl']" mode="widthFix"></image>
						</view>
						<!-- 第7个奖品 -->
						<view class="prize-item">
							<view class="item-mask" :class="{active: activePrizeIndex === 6}"></view>
							<image class="item-image" v-if="prizeList[6]['prizeImageUrl']" :src="prizeList[6]['prizeImageUrl']" mode="widthFix"></image>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="dd-whitespace"></view>
		
		<!-- 分享邀请好友 -->
		<view class="dd-share">
			<view class="share-title">
				<view class="share-title-line"></view>
				<view class="share-title-text">邀请好友</view>
				<view class="share-title-line"></view>
			</view>
			<view class="share-btn">
				<button class="share-btn-in" type="primary" open-type="share">邀请好友</button>
			</view>
			<view class="share-desc">
				{{ rulesList2 }}
			</view>
		</view>
		
		<view class="dd-whitespace"></view>
		
		<!-- 活动详情 -->
		<RulesList title="活动详情" :list="rulesList"></RulesList>


		<!-- 相关弹窗 -->
		<view class="dd-modal" v-if="showModal">
			
			<block v-if="showModal && showNoPrize">
				<!-- 没有奖品 谢谢惠顾 -->
				<view class="prize-thanks" v-if="showModal && showNoPrize">
					<image src="../../static/doubleDan/thanks.png" mode="widthFix"></image>
					<view class="prize-content">
						分享或邀请新用户可多次抽奖哦
					</view>
				</view>
			</block>
			
			<block v-else>
				<!-- 开启宝箱 -->
				<view class="box-open" v-if="showModal && showBox">
					<view class="box-open-text">
						点击开启超级宝箱
					</view>
					<view class="box-open-img" @click="onCloseBoxAndOpenPrize">
						<image src="../../static/doubleDan/box-big.png" mode="widthFix"></image>
					</view>
				</view>
				
				<!-- 奖品 -->
				<view class="prize-open" v-if="showModal && showPrize">
					
					<view class="prize-in">
						<image src="../../static/doubleDan/prize.png" mode="widthFix"></image>
						
						<!-- 中奖的结果 -->
						<block v-if="showMoney">
							<view class="prize-value">
								<view class="prize-value-in">
									<text>{{ prizeMoney / 100 }}</text>
									<text class="prize-value-unit">元</text>
								</view>
								<view class="prize-value-text">
									{{ prizeData.prizeName || "现金红包" }}
								</view>
							</view>
							<view class="prize-content">
								已存入夜鱼快宿账户请登录APP【我的佣金】查看
							</view>
						</block>
						
						<block v-else>
							<!-- <view class="prize-value">
								<view class="prize-value-in">
									<view>50</view>
									<view class="prize-value-unit">元</view>
								</view>
								<view class="prize-value-text">
									夜鱼优惠券
								</view>
							</view>
							<view class="prize-content">
								已存入夜鱼快宿账户请登录APP查看
							</view> -->
							<block v-if="prizeData && (prizeData.prizeType === 1 || prizeData.prizeType === 2)">
								<view class="prize-value">
									<view class="prize-value-in">
										<image :src="prizeData.prizeImageReturnUrl" mode="widthFix"></image>
									</view>
									<view class="prize-value-text">
										{{ prizeData.prizeName }}
									</view>
								</view>
								<view class="prize-content">
									截止兑换时间<br />
									{{ dateUtil.formatTime(prizeData.endTime) }}
								</view>
							</block>
							<block v-else-if="prizeData && prizeData.prizeType === 3">
								<view class="prize-value">
									<view class="prize-value-in">
										<view>{{ prizeData.prizePrice / 100 }}</view>
										<view class="prize-value-unit">元</view>
									</view>
									<view class="prize-value-text">
										{{ prizeData.prizeName }}
									</view>
								</view>
								<view class="prize-content">
									已存入夜鱼快宿账户请登录APP查看
								</view>
							</block>
						</block>
						
					</view>
					
				</view>
			</block>

			<!-- 引导下载app -->
			<view class="guide-download" v-if="showModal && (showPrize || showNoPrize)" >
				<CButton
					width="420"
					height="80"
					color="#FB5B05"
					background="#F2E51D"
					border-radius="40"
					@click="onHandleOpenQRCode"
				>去下载APP</CButton>
			</view>
			
			<!-- 关闭modal按钮 -->
			<view class="close-modal" @click="onCloseModal">		
				<image src="../../static/close.png" mode="widthFix"></image>
			</view>
			
		</view>
		
		<!-- 弹窗二维码，引导扫码下载 -->
		<view class="dd-qrcode" v-if="showQRCode">
			<view class="qrcode-content">
				<view class="qrcode-img">
					<image @longpress="onSaveQRCode" src="../../static/downloadApp-qrcode.png" mode="widthFix"></image>
				</view>
				<view class="qrcode-text">
					<view>长按保存二维码</view>
					<view>通过微信扫一扫下载夜鱼快宿APP</view>
				</view>
			</view>
			
			<view class="close-qrcode" @click="onHandleCloseQRCode">
				<image src="../../static/close.png" mode="widthFix"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { isLogin, getUserInfo, hidePhoneCenter, saveImageToPhotosAlbum } from '@/utils/index.js';
	import dateUtil from '@/utils/date.js';
	import RulesList from '@/components/rules/rules.vue';
	import CButton from '@/components/cButton/cButton.vue';
	
	export default {
		components: {
			RulesList,
			CButton,
		},
		data() {
			return {
				dateUtil: dateUtil,
				userInfo: {},	// 用户信息
				userPhone: '',	// 用户手机号
				userId: '',	// 分享来源人的用户id
				selfUserId: '',	// 当前用户的用户id
				people: 0,	// 当前抽奖人数
				swiperList: [],	// 轮播数据列表
				boxList: {},	// 宝箱列表状态数据
				lotteryCount: 0,	// 当前剩余抽奖次数
				isLottery: false,	// 是否正在抽奖开关
				prizeList: [],	// 抽奖列表
				times: 0,	// 获得prizeId之后计算出的动画次数
				prizeId: null,	// 当前抽中奖的id
				prizeData: {},	// 当前抽奖的结果
				activePrizeIndex: null,	// 当前执行到的奖品索引
				activeTimes: 0,	// 当前执行到的动画次数
				rulesList: [],	// 活动规则
				rulesList2: '',	// 分享按钮下方的文案
				showModal: false,	// 打开弹窗
				showBox: false,	//打开宝箱
				showPrize: false,	// 展示产品
				showNoPrize: false,	// 谢谢惠顾
				showQRCode: false,	// 展示下载二维码
				showMoney: false,	// 展示佣金钱的奖励
				prizeMoney: 0,	// 抽奖或开启宝箱得到的金额
			};
		},
		onShow() {
			// this.refresh();
		},
		onLoad(options) {
			const {
				userId,
				token,
				userInfo,
			} = options;
			this.userId = userId;
			if (token) {
				uni.setStorageSync('yeyuMini_token', token);
			}
			if (userInfo) {
				uni.setStorageSync('yeyuMini_userInfo', userInfo);
			}
			
			// setInterval(() => {
			// 	this.people += 10;
			// 	if (this.people >= 30000) {
			// 		this.people = 0;
			// 	}
			// }, 10)
			
			// 先判断有没有登录，如果没有登录则跳转到登录页面
			if (!isLogin()) {
				
				const {
					userId = '',
				} = options;
				
				uni.showToast({
					mask: true,
					icon: 'none',
					title: '即将跳转到登录',
				})
				setTimeout(() => {
					const redirectUrl = encodeURIComponent(`/login?userId=${userId}&platform=miniprogram&type=4&path=/doubleDan/doubleDan`)
					uni.redirectTo({
						url: `/pages/index/index?redirect=${redirectUrl}`
					})
				}, 1500)
			} else {
				// 执行逻辑
				const userInfo = getUserInfo() || {};
				this.userInfo = userInfo;
				this.userPhone = hidePhoneCenter(userInfo.phone || '');
				this.selfUserId = userInfo.id;
				
				// 获取活动规则
				this.getRules();
				// 统计活动进入量
				this.addStatistics('join');
				// 获取抽奖次数
				this.getPrizeCount();
				// 获取宝箱状态数据
				this.getBoxStatus();
				// 获取奖品数据列表
				this.getPrizeList()
				// 获取轮播图数据
				this.getCarouselList();
			}
		},
		
		methods: {
			
			// 刷新
			refresh() {
				// 获取抽奖次数
				this.getPrizeCount();
				// 获取宝箱状态数据
				this.getBoxStatus();
				// 获取轮播图数据
				this.getCarouselList();
			},
			
			// 获取活动规则
			getRules() {
				this.$request('/app/activity/doubleDan/activity/detail', {
					success: res => {
						const data = res.body || {};
						const rules = data.noteH5 || '';
						this.rulesList = data.noteH5 && data.noteH5.split('@@@');
						this.rulesList2 = data.noteApp;
					}
				});
			},
			
			// 统计活动进入量
			addStatistics(type) {
				if (type === 'zhuanfa') {
					this.$request('/app/activity/doubleDan/statistic/increment/activityForwardNumberRecord', {
						params: {
							source: 2,
						},
					});
				} else {
					this.$request('/app/activity/doubleDan/statistic/increment', {
						params: {
							key: 'ACA',
						},
					});
				}
			},
			
			// 轮播图手势滑动时触发
			onSwiperTouchMove() {
				return false;
			},
			
			// 点击我的奖品时触发, 跳转到我的奖品页面
			onClickMyPrize() {
				uni.navigateTo({
					url: '/pages/doubleDanMyPrize/doubleDanMyPrize',
				})
			},
		
			// 获取抽奖次数
			getPrizeCount() {
				this.$request('/app/activity/doubleDan/getPrizeCount', {
					success: res => {
						const data = res.body || {};
						this.lotteryCount = data.remainingTimes || 0;
					},
				});
			},
			
			// 获取宝箱状态数据
			getBoxStatus() {
				this.$request('/app/activity/doubleDan/getTreasureChestStatus', {
					success: res => {
						const data = res.body || {};
						this.people = data.count || 0;
						this.boxList = data.map || {};
					}
				});
			},
		
			// 获取奖品数据列表
			getPrizeList() {
				this.$request('/app/activity/doubleDan/getPrizeList', {
					success: res => {
						const data = res.body || {};
						this.prizeList = data.list || [];
					}
				});
			},
			
			// 获取轮播图列表数据
			getCarouselList() {
				this.$request('/app/activity/doubleDan/getCarousel', {
					success: res => {
						const data = res.body || [];
						this.swiperList = data;
					},
				});
			},
		
		
			// 开始抽奖
			onBeginLottery() {
				
				const {
					lotteryCount = 0,
					isLottery = false,
				} = this;
				
				// 还有几次抽奖次数
				if (lotteryCount === 0) {
					return;
				}
				
				if (!isLottery) {
					
					uni.showLoading({
						title: '',
						mask: true,
					});
					
					this.$request('/app/activity/doubleDan/lottery', {
						params: {
							parentId: this.userId || '',
						},
						success: res => {
							const data = res.body || {};
							if (data.enable) {
								uni.hideLoading();
								this.lotteryFunc(data);
							} else {
								uni.showToast({
									icon: 'none',
									title: '您的抽奖次数已用完',
								})
							}
						}
					});
					
				}
				
			},
			
			// 抽奖算法
			lotteryFunc(data) {
				this.prizeData = data;
				this.lotteryCount = data.remainingTimes || 0;
				this.prizeId = data.prizeId;
				this.activeTimes = 0;
				this.activePrizeIndex = 0;
				this.isLottery = true;
				this.times = 45;
				const prizeType = data.prizeType;
				
				this.lotteryInterval = setInterval(() => {
					
					if (this.activeTimes > this.times && this.prizeList[this.activePrizeIndex].id === this.prizeId) {
						clearInterval(this.lotteryInterval);
						this.isLottery = false;
						// 然后展示奖品弹窗
						switch(prizeType) {
							case 1:	// 通用类型
								this.showModal = true;
								this.showPrize = true;
								break;
							case 2:	// 兑换码类型（有明细）
								this.showModal = true;
								this.showPrize = true;
								break;
							case 3:	// 优惠券
								this.showModal = true;
								this.showPrize = true;
								break;
							case 4:	// 红包
								this.showModal = true;
								this.showPrize = true;
								this.showMoney = true;
								this.prizeMoney = data.prizePrice || 0;
								break;
							case 99: // 谢谢参与
								this.showModal = true;
								this.showNoPrize = true;
								break;
							default:
								break;
						};
						
						// 重新获取轮播图数据
						this.getCarouselList();
						return;
					}

					if (this.activePrizeIndex === 11) {
						this.activePrizeIndex = 0;
					} else {
						this.activePrizeIndex += 1;
					}
				
					this.activeTimes += 1;
					
				}, 50)
			},
		
			// 开启宝箱
			onOpenBox() {
				this.showModal = true;
				this.showBox = true;
			},
			// 关闭宝箱，并打开宝箱奖励
			onCloseBoxAndOpenPrize() {
				uni.showLoading({
					title: '',
					mask: true,
				});
				// 调取开启宝箱奖励的接口
				this.$request("/app/activity/doubleDan/lotteryTreasureChest", {
					success: res => {
						uni.hideLoading();
						const data = res.body || {};
						// 关闭宝箱，打开奖励
						this.showBox = false;
						this.showPrize = true;
						this.showMoney = true;
						this.prizeMoney = data.prizePrice || 0;
						// 刷新数据
						this.refresh();
					}
				});
			},
			
			// 关闭modal弹窗
			onCloseModal() {
				this.showModal = false;
				this.showBox = false;
				this.showPrize = false;
				this.showNoPrize = false;
				this.showQRCode = false;
				this.showMoney = false;
			},
			
			// 打开下载二维码
			onHandleOpenQRCode() {
				this.onCloseModal();
				this.showQRCode = true;
			},
			
			// 关闭下载二维码
			onHandleCloseQRCode() {
				this.onCloseModal();
				this.showQRCode = false;
			},
			
			// 长按二维码保存
			onSaveQRCode() {
				saveImageToPhotosAlbum({
					filePath: '/static/downloadApp-qrcode.png',
					success: () => {
						this.showQRCode = false;
					},
				});
			},
			
		},
	
		onShareAppMessage() {
			// 增加抽奖机会
			this.$request('/app/activity/doubleDan/inrLotteryCount', {
				success: res => {
					// 刷新抽奖次数
					this.refresh();
				}
			});
			// 统计转发量
			this.addStatistics('zhuanfa');
			
			const titleArr = [
				"百分百中奖！我真的赚到了！快来免费拿iPhone",
				"简单无门槛，一键点击，每天都能赚！",
				"双12福袋抢先赚！专业薅羊毛秘籍，快上车！",
				"速度领红包！每天5次，iPhone11免费赚！",
				"速度领红包！每天5次，华为Mate30免费赚！",
				"这平台是真给钱啊！免费领百元红包，我刚刚成功！",
			];
			
			const title = titleArr[Math.floor(Math.random() * 6)] || titleArr[0];
			
			// 分享信息
			return {
				title: title,
				path: `/pages/doubleDan/doubleDan?userId=${this.selfUserId}`,
				imageUrl: 'https://yeyu-kuaisu.oss-cn-hangzhou.aliyuncs.com/image/fengxiang.jpg',
			}
		}
	}
</script>

<style scoped lang="scss">
	
	@import '@/common/styles/mixin/utils.scss';
	
	.page-doubleDan {
		background: #F77845;
		min-height: 100vh;
		padding-bottom: 120rpx;
		
		
		.dd-whitespace {
			height: 30rpx;
		}
		
		.dd-desc {
			position: relative;
			width: 100vw;
			
			.desc-img {
				width: 100%;
				vertical-align: middle;
			}
			
			.desc-user {
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				color: #FFFFFF;
				font-size: 28rpx;
			}
			
			.desc-myPrize {
				position: absolute;
				top: 20rpx;
				right: 0;
				padding: 0 14rpx 0 20rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: rgba(255, 255, 255, 0.85);
				border-radius: 100rpx 0rpx 0rpx 100rpx;
				color: #333333;
				font-size: 26rpx;
			}
			
			.desc-joinList {
				$swiper-width: 560rpx;
				$swiper-height: 60rpx;
				
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: $swiper-width;
				height: $swiper-height;
				background: rgba(0, 0, 0, .5);
				border-radius: 36rpx;
				
				.joinList-swiper {
					width: 100%;
					height: 100%;
					
					.joinList-swiper-item {
						width: 100%;
						height: $swiper-height;
						line-height: $swiper-height;
						color: #FFFFFF;
						font-size: 24rpx;
						
						.swiper-item-content {
							width: 100%;
							height: 100%;
							padding: 0 25rpx;
							@include ellipsis();
						}
					}
				}
			}
		}
		
		.dd-box {
			display: flex;
			align-items: center;
			padding: 0 20rpx 0 30rpx;
			height: 180rpx;
			
			.box-number {
				color: #FFFFFF;
				font-size: 20rpx;
			}
			
			.box-progress {
				$box-width: 630rpx;
				flex: 1;
				position: relative;
				// width: $box-width;
				
				.box-progress-line {
					display: flex;
					width: 100%;
					height: 10rpx;
					border-radius: 4rpx;
					background: #fff;
					overflow: hidden;
					
					.box-progress-line-active {
						width: 20%;
						height: 100%;
						
						.active-in {
							width: 0%;
							max-width: 100%!important;
							height: 100%;
							background: #FB3A14;
						}
						&.full {
							.active-in {
								width: 100%!important;
							}
						}
					}
				}
				
				.box-item {
					position: absolute;
					top: -50%;
					transform: translate(-70%, -20%);
					display: flex;
					flex-direction: column;
					align-items: center;
					white-space: nowrap;
					
					& > image {
						width: 50rpx;
					}
					
					&.item-1 {
						left: 20%;
					}
					&.item-2 {
						left: 40%;
					}
					&.item-3 {
						left: 60%;
					}
					&.item-4 {
						left: 80%;
					}
					&.item-5 {
						left: 100%;
					}
				}
			}
			
			.box-currentPerson {
				flex: none;
				// min-width: 50rpx;
				margin-left: 20rpx;
			}
		}
		
		
		.dd-share {
			width: 690rpx;
			margin: 0 auto;
			border-radius: 16rpx;
			background: #FFF;
			padding: 30rpx;
			
			.share-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;
				
				.share-title-line {
					width: 200rpx;
					height: 2rpx;
					background: rgba(0, 0, 0, 0.3);
				}
				
				.share-title-text {
					color: #3A4043;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
			
			.share-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				
				.share-btn-in {
					width: 600rpx;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 32rpx;
					background: #56B323;
				}
			}
			
			.share-desc {
				color: #666666;
				font-size: 24rpx;
				text-align: center;
				padding: 0 10rpx;
				margin-top: 30rpx;
			}
			
		}
		
		.dd-prize {
			width: 690rpx;
			margin: 0 auto;
			
			.prize-wrap {
				width: 100%;
				padding: 50rpx 30rpx;
				background: #FB5B05;
				border-radius: 20rpx;
			}
			
			.prize-wrap-in {
				position: relative;
				
				.prize-btn {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 276rpx;
					height: 276rpx;
					background: #fff;
					border-radius: 200%;
					color: #000000;
					
					&.disabled {
						background: #E8E8E8;
					}
					
					.prize-btn-text {
						font-size: 32rpx;
						font-weight: 600;
						margin-bottom: 16rpx;
					}
					.prize-btn-count {
						font-size: 30rpx;
					}
				}
				
				.prize-row {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;
					&:last-child {
						margin-bottom: 0;
					}
					
					.prize-item {
						position: relative;
						width: 150rpx;
						height: 150rpx;
						border-radius: 12rpx;
						overflow: hidden;
						background: #fff;

						.item-image {
							width: 100%;
							height: 100%;
						}
						
						.item-mask {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
              background: transparent;
							
							&.active {
								background: rgba(251, 91, 5, 0.3);
							}
						}
					}
				}
			}
		}

		.dd-modal {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 999;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: rgba($color: #000000, $alpha: 0.3);
			
			
			.prize-content {
				position: absolute;
				left: 50%;
				top: 520rpx;
				// bottom: 120rpx;
				transform: translateX(-50%);
				width: 300rpx;
				text-align: center;
				padding: 15rpx 12rpx;
				background: #E45C10;
				color: #FFF;
				font-size: 26rpx;
				border-radius: 4rpx;
			}
			
			.prize-thanks {
				position: relative;
				width: 690rpx;
				height: 738rpx;
				& > image {
					width: 100%;
				}
				
				.prize-content {
					@extend .prize-content;
				}
				
			}
			
			.box-open {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.box-open-text {
					color: #FFFFFF;
					font-size: 44rpx;
					margin-bottom: 35rpx;
					font-weight: 600;
				}
				
				.box-open-img {
					width: 392rpx;
					
					& > image {
						width: 100%;
					}
				}
			}
		
			.prize-open {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				

				.prize-in {
					position: relative;
					width: 690rpx;
					height: 738rpx;
					& > image {
						width: 100%;
					}
					
					.prize-value {
						position: absolute;
						top: 200rpx;
						left: 50%;
						transform: translateX(-50%);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						
						.prize-value-in {
							display: flex;
							align-items: flex-end;
							justify-content: center;
							color: #FB5B05;
							font-size: 140rpx;
							font-weight: 600;
							line-height: 1;
							margin-top: 10rpx;
							
							.prize-value-unit {
								text-align: center;
								font-size: 24rpx;
								color: #FFF;
								padding: 10rpx;
								background: #FB5B05;
								border-radius: 100%;
								font-weight: normal;
							}
							
							& > image {
								width: 180rpx;
								height: auto;
							}
						}
						
						.prize-value-text {
							color: #FB5B05;
							font-size: 26rpx;
							margin-top: 20rpx;
						}
						
					}
				}
			}
			
			.guide-download {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.close-modal {
				width: 60rpx;
				height: auto;
				margin-top: 20rpx;
				
				& > image {
					width: 100%;
				}
			}
			
		}
		
		
		.dd-qrcode {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 999;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: rgba($color: #000000, $alpha: 0.3);
			
			.qrcode-content {
				width: 500rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: #FFF;
				padding: 60rpx 0 40rpx;
				border-radius: 8rpx;
				
				.qrcode-img {
					display: flex;
					align-items: center;
					justify-content: center;
					& > image {
						width: 375rpx;
						height: auto;
					}
				}
				
				.qrcode-text {
					text-align: center;
					color: #3A4043;
					font-size: 26rpx;
					line-height: 38rpx;
					margin-top: 50rpx;
				}
			}
			
			.close-qrcode {
				width: 60rpx;
				height: auto;
				margin-top: 50rpx;
				
				& > image {
					width: 100%;
				}
			}
			
		}
		
		
	}
	
</style>
